<template>
  <div>
    <h3 class="title">通知、会议类型管理</h3>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="name"
      border
      default-expand-all
      :tree-props="{children: 'children', Children: 'hasChildren'}"
    >
      <el-table-column prop="name" label width="180" />
      <el-table-column prop="alias" label="名称" />
      <el-table-column prop="priority" label="排序号" />
      <el-table-column prop="description" label="描述" />
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-show="scope.row.parent === root " @click="handleAdd(scope.row)">添加子类型</el-button>
          <el-button v-show="scope.row.parent !== root " plain @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            v-show="scope.row.parent !== root "
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :rule="rules" :visible.sync="dialogVisibleFlag" :title="dialogTitle">
      <el-form v-model="menuForm" label-width="100px">
        <el-form-item label="名称（英文）">
          <el-input v-model="menuForm.name" />
        </el-form-item>
        <el-form-item label="名称（中文）">
          <el-input v-model="menuForm.alias" />
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model="menuForm.priority" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="menuForm.description" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(menuForm)">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getMenu, postMenu } from '@/api/common/static'
export default {
  name: 'NoticeTypeManage',
  data: () => ({
    tableLoading: false,
    tableData: [],
    root: 'app.party',
    menuForm: {},
    dialogVisibleFlag: false,
    dialogTitle: null,
    rules: { priority: [{ type: 'number', message: '请填写数字值' }] }
  }),
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.tableLoading = true
      getMenu(this.root)
        .then(data => {
          data.list = data.list.filter(i => i.name !== this.root)
          const ar = data.list.map(item => {
            return new Promise((res, rej) => {
              getMenu(item.name).then(el => {
                if (el.list.length !== 1) {
                  item.children = el.list.filter(j => j.name !== item.name)
                }
                res(item)
              })
            })
          })
          Promise.all(ar).then(result => {
            this.tableData = result
          })
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    handleAdd(row) {
      this.menuForm = { parent: row.name }
      this.dialogTitle = '添加类型'
      this.dialogVisibleFlag = true
    },
    handleEdit(row) {
      this.menuForm = row
      this.dialogTitle = '编辑类型'
      this.dialogVisibleFlag = true
    },
    handleDelete(row) {
      this.$confirm('确认删除吗？').then(_ => {
        const form = Object.assign(row, { isRemoved: true })
        postMenu(form).then(_ => {
          this.$message.success('删除成功')
          this.refresh()
        })
      })
    },
    submitForm(formData) {
      postMenu(formData).then(() => {
        this.$message.success(`添加标签成功：${formData.alias}`)
        this.dialogVisibleFlag = false
        this.refresh()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-family: '方正小标宋简体';
  font-weight: 500px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
</style>
